<template>
  <div id="app">
    <!-- 登录/注册页面 -->
    <div v-if="!isLoggedIn" class="login-layout">
      <TitleBar />
      <div class="login-container">
        <LoginForm 
          v-if="showLoginForm && !showRegisterForm" 
          @login-success="handleLogin" 
          @register="showRegisterFormHandler" 
        />
        <RegisterForm
          v-else-if="showRegisterForm"
          @login="handleLoginShow"
          @registerSuccess="handleRegisterSuccess"
        />
      </div>
    </div>
    
    <!-- 主应用页面 - 左右分栏布局 -->
    <div v-else class="main-layout">
      <!-- 左侧菜单 -->
      <LeftSidebar />
      
      <!-- 右侧区域 -->
      <div class="right-panel">
        <!-- 顶部标题栏 -->
        <TitleBar />
        
        <!-- 主容器 -->
        <MainContainer ref="mainContainer" :is-logged-in="isLoggedIn" />
      </div>
    </div>

    <!-- 全局Toast提示 -->
    <GlobalToast />

  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { getCurrentWindow } from '@tauri-apps/api/window';
import { useAuth } from './composables/useAuth';
import { useTheme } from './composables/useTheme';
import LoginForm from './components/LoginForm.vue';
import RegisterForm from './components/RegisterForm.vue';
import TitleBar from './components/TitleBar.vue';
import LeftSidebar from './components/LeftSidebar.vue';
import MainContainer from './components/MainContainer.vue';
import GlobalToast from './components/GlobalToast.vue';

const mainContainer = ref();
const appWindow = getCurrentWindow();

// 使用 useAuth composable
const { isLoggedIn, currentUser, checkLoginStatus, initializeAuthFromStorage, login, logout } = useAuth();

// 使用 useTheme composable
const { initializeTheme } = useTheme();

const showLoginForm = ref(true);
const showRegisterForm = ref(false);



onMounted(async () => {
  // 初始化主题系统
  initializeTheme();
  
  // 初始化本地存储的登录状态（快速 UI 更新）
  initializeAuthFromStorage();
  
  // 检查后端会话状态
  await checkLoginStatus();
  
  // 监听退出登录事件
  window.addEventListener('user-logout', handleLogout);
});

// 登录处理函数
const handleLogin = async (user) => {
  // 登录成功后，useAuth 已经处理了状态更新
  console.log('登录成功:', user);
};

const handleLoginShow = () => {
  showLoginForm.value = true;
  showRegisterForm.value = false;
}

// 注册成功处理函数
const handleRegisterSuccess = (username) => {
  showLoginForm.value = true;
  showRegisterForm.value = false;
  // 可以预填用户名
  console.log('注册成功，用户名:', username);
};

// 显示注册表单时最大化窗口
const showRegisterFormHandler = () => {
  showLoginForm.value = false;
  showRegisterForm.value = true;
  // 最大化窗口
  if (typeof window !== 'undefined' && window.__TAURI__) {
    appWindow.maximize();
  }
};

// 退出登录处理函数 - 处理 CustomEvent('user-logout') 事件
const handleLogout = async (event) => {
  console.log('App: 收到退出登录事件', event?.detail);
  
  try {
    // 使用 useAuth composable 的 logout 方法进行完整的登录状态清理
    await logout();
    console.log('App: 登录状态已通过 useAuth.logout() 清理完成');
  } catch (error) {
    console.error('App: useAuth.logout() 失败，执行备用清理', error);
    
    // 备用清理方案：手动清理状态和刷新页面
    localStorage.removeItem('isLoggedIn');
    localStorage.removeItem('currentUser');
    
    setTimeout(() => {
      console.log('App: 正在刷新页面...');
      window.location.reload();
    }, 200);
  }
};



// 清理逻辑由MapContainer组件内部处理
  onUnmounted(() => {
    console.log('App组件卸载，清理资源')
    window.removeEventListener('user-logout', handleLogout);
  });
</script>

<style>
/* Global theme-aware styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
}

#app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* 登录页面独立布局 */
.login-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background: var(--bg-primary);
  overflow: hidden;
}

.login-container {
  margin-top: 42px;
  height: calc(100vh - 42px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
}

/* 主应用左右分栏布局 */
.main-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--bg-primary);
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-primary);
}

/* 移除旧的样式 - 保留地图显示 */
.app-container {
  display: none;
}

.loading提示,
.error提示 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px 32px;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}

.error提示 {
  background: var(--accent-danger);
  border: 1px solid var(--accent-danger);
  color: var(--text-inverse);
}

@media (max-width: 768px) {
  .login-container {
    padding: 0 20px;
  }
}
</style>